import React, { Component } from 'react'

export default class Ref3 extends Component {
  //1. 声明属性
  input = React.createRef();// 
  result = React.createRef();

  //声明回调
  show = () => {
    // 3. 获取真实 DOM
    // current 是当前的意思
    let v = this.input.current.value;
    //设置
    this.result.current.innerHTML = v;
  }

  render() {
    return (
      <div>
        {/* 2. 设置虚拟 DOM 对象 ref 的值 */}
        <input type="text" ref={this.input}  /> <button onClick={this.show}>显示</button>
        <hr />
        <div ref={this.result} id="result" style={{width: '400px', height: '300px', border: 'solid 1px #aaa'}}></div>
      </div>
    )
  }
}
